<template>
	<view class="word">
		<navbar title=" "></navbar>
		<view class="cate acea-row row-around row-middle">
			<view class="item" :class="type==0?'on':''" @click="typeClick(0)">信息表申请</view>
			<view class="item" :class="type==1?'on':''" @click="typeClick(1)">使用记录</view>
		</view>
		
		<block v-if="type==0">
			<view style="width: 100%;height: 110rpx;"></view>
			<view class="p30 bgwhite">
				
				<view class="acea-row row-middle bold">
					<view class="title">中心名称</view>
					<view class="subtitle">{{  userdata.zongxin_name }}（正常缴存）</view>
				</view>
				
				<view class="acea-row row-middle bold" style="margin-top: 40rpx;">
					<view class="title">公积金账号</view>
					<view class="subtitle">{{  userdata.card_id }}</view>
				</view>
			</view>
			
			<view class="submit">提交</view>
			
			<view class="text">
				<view class="">
					住房公积金个人业务办理电子码系统根据缴存职工申请生成，
					办理业务时向工作人员展示此码，受理机构可用于查询和核验住房公积金缴存、提取、贷款等信息。
				</view>
				<view class="link">点击了解住房公积金管理机构查询内容</view>
				<view class="">请勿随意向他人展示，防止个人信息泄露。</view>
			</view>
		</block>
		
		<block v-if="type==1">
			<view class="acea-row row-middle timers">
				<view class="acea-row row-between-wrapper">
					<view class="date" @click.stop="dateOpen('start_date',start_date)">		
						{{ start_date?start_date:'请选择' }}
					</view>
					<view>~</view>
					<view class="date" @click.stop="dateOpen('end_date',end_date)">
						{{ end_date?end_date:'请选择' }}
					</view>
				</view>
				<view class="chaxun" @click="chaxun">查询</view>
			</view>
			<view style="width: 100%;height: 250rpx;"></view>
			<view class="none-data">没有更多数据</view>
			
		</block>

		 <my-datetime ref="dateTimePop" @ok="timeOk"></my-datetime>
		 
		 
	</view>
</template>

<script>
	import{
		userData
	} from '@/api/user.js'
	import { myDatetime } from '@/components/my-datetime/my-datetime.vue'
	import navbar from '../../components/navbar.vue'
	export default {
		components:{
			navbar,
			myDatetime
		},
		data() {
			return {
				type: 0,
				start_date:'',
				end_date:'',
				dateKey:'',
				userdata: [],
				
			};
		},
		onShow() {
			this.getTimer();
			this.getdata();
		},
		methods:{
			getdata(){
				userData().then(res=>{
					this.userdata = res.data.userData;
				})
			},
			chaxun(){
				
			},
			getTimer(){
				let time = new Date();
				let year = time.getFullYear();
				let month = time.getMonth() + 1 > 10 ? time.getMonth() + 1 : (time.getMonth() + 1);
				let date = time.getDate()>=10 ? time.getDate() : '0'+time.getDate();
				let lastDate = new Date(year, month , 0).getDate();
				this.start_date = (year-1) + '-' + month + '-' + date;
				this.end_date = year + '-' + month + '-' + date;
			},
			typeClick(val){
				this.type = val;
			},
			// 开启弹窗
			dateOpen (key, date) {
				this.dateKey = key
				this.$refs.dateTimePop.open(date || '');
			},
			// 关闭弹窗
			timeOk (str, obj) {
				console.log(str)
				this[this.dateKey] = str || ''
			},
		}
	}
</script>

<style lang="scss">
	.word{
		
		.cate{
			width: 100%;
			padding: 10rpx;
			background-color: #ffffff;
			position: fixed;
			top: 180rpx;
			left: 0;
			right: 0;
			
			.item{
				width: 160rpx;           
				line-height: 70rpx;
				text-align: center;
				font-size: 30rpx;
				// font-weight: bold;
				color: #888888;
				
				&.on{
					border-bottom: 4rpx solid #3165DD;
					color: #3165DD;
				}
			}
		}
		
		.title{
			width: 220rpx;
			font-size: 28rpx;
		}
		.subtitle{
			font-size: 28rpx;
			width: 415rpx;
		}
		
		.submit{
			width: 650rpx;
			line-height: 88rpx;
			border-radius: 50rpx;
			background-color: #2F65DF;
			font-size: 30rpx;
			text-align: center;
			color: #ffffff;
			margin: 80rpx auto;
		}
		
		.text{
			padding: 0 75rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			color: #A4A4A4;
			
			.link{
				text-decoration: underline;
				color: #3165DD;
			}
		}
		
		.timers{
			background-color: #ffffff;
			padding: 20rpx 10rpx;
			position: fixed;
			top: 273rpx;
			left: 0;
			right: 0;
			
			.date{
				width: 220rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #F7F7F7;
				margin: 0 20rpx;
				font-size: 26rpx;
				border-radius: 10rpx;
			}
			
			.chaxun{
				width: 180rpx;
				height: 80rpx;
				background-color: #3D63D7;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
			}
			
		}
		
		.none-data{
			color: #999999;
			font-size: 24rpx;
			text-align: center;
		}

		
		
	}

</style>
